* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
body {
  background: url("../images/bg.jpg") no-repeat top;
  background-size: 100% 100%;
  color: #4c9bfd;
  padding-bottom: 20px;
}
.panel {
  border: solid;
  border-image-source: url(../images/border.png);
  border-image-width: 52px 51px 30px 130px;
  border-image-slice: 52 51 30 130;
  border-image-repeat: repeat;
}
header .logo {
  width: 100%;
}
.common-title {
  display: flex;
  align-items: center;
  padding-left: 35px;
  height: 60px;
  font-size: 20px;
  color: #fff;
}
.common-title .line {
  width: 2px;
  height: 20px;
  background-color: #00f2f1;
  margin: 0 26px;
}
.common-title .abnormal {
  color: #4c9bfd;
}
.container {
  display: flex;
  padding: 0 20px;
}
.container .container-left {
  width: 552px;
}
.container .container-left .device {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 110px;
  margin-top: -30px;
}
.container .container-left .device .device-item .item-num {
  font-weight: 400;
  font-size: 22px;
  color: #fff;
  margin-bottom: 10px;
}
.container .container-left .device .device-item .item-text {
  font-size: 16px;
}
.container .container-left .device .device-item .item-text i {
  margin-right: 3px;
  margin-left: -5px;
}
.container .container-left .device .device-item:nth-child(2) i {
  color: #6acca3;
}
.container .container-left .device .device-item:nth-child(3) i {
  color: #6acca3;
}
.container .container-left .device .device-item:nth-child(4) i {
  color: #ed3f35;
}
.container .container-left .monitoring {
  display: flex;
  flex-direction: column;
  height: 480px;
  margin: 20px 0;
}
.container .container-left .monitoring .list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 35px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.2);
}
.container .container-left .monitoring .list-body {
  flex: 1;
  padding: 0 35px;
  overflow: hidden;
  color: #599aea;
}
.container .container-left .monitoring .list-body .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}
.container .container-left .point {
  height: 340px;
}
.container .container-left .point .panel-body {
  display: flex;
  margin: 10px 0 20px;
  padding: 0 35px;
}
.container .container-left .point .panel-body .point-chart {
  flex: 1;
  margin-right: 10px;
}
.container .container-left .point .panel-body .point-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 31px;
  width: 168px;
  height: 236px;
  background: url(../images/rect.png) no-repeat;
}
.container .container-left .point .panel-body .point-info .point-item h4 {
  font-weight: normal;
  font-size: 25px;
  color: #fff;
  margin-bottom: 5px;
}
.container .container-left .point .panel-body .point-info .point-item:first-child i {
  color: #ed3f35;
}
.container .container-left .point .panel-body .point-info .point-item:last-child i {
  color: #eacf19;
}
.container .container-center {
  flex: 1;
  margin: 0 20px;
}
.container .container-center .title {
  display: flex;
  align-items: center;
  height: 54px;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}
.container .container-center .title i {
  color: #68d8fe;
  margin-right: 3px;
}
.container .container-center .map {
  height: 526px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
}
.container .container-center .user {
  height: 340px;
}
.container .container-center .user .user-body {
  display: flex;
  margin: 10px 0 20px;
  padding: 0 35px;
}
.container .container-center .user .user-body .user-chart {
  flex: 1;
  margin-right: 10px;
}
.container .container-center .user .user-body .user-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 31px;
  width: 168px;
  height: 236px;
  background: url(../images/rect.png) no-repeat;
}
.container .container-center .user .user-body .user-info .user-item h4 {
  font-weight: normal;
  font-size: 25px;
  color: #fff;
  margin-bottom: 5px;
}
.container .container-center .user .user-body .user-info .user-item:first-child i {
  color: #ed3f35;
}
.container .container-center .user .user-body .user-info .user-item:last-child i {
  color: #eacf19;
}
.container .container-right {
  width: 552px;
}
.container .container-right .order {
  height: 148px;
  margin-top: -30px;
}
.container .container-right .order .order-title {
  display: flex;
  align-items: center;
  padding-left: 35px;
  height: 60px;
  font-size: 20px;
  color: #4c9bfd;
}
.container .container-right .order .order-title .line {
  width: 2px;
  height: 20px;
  background-color: #00f2f1;
  margin: 0 26px;
}
.container .container-right .order .order-title .current {
  color: #fff;
}
.container .container-right .order .order-info {
  display: flex;
  align-items: center;
  padding-left: 35px;
}
.container .container-right .order .order-info .order-item {
  flex: 1;
}
.container .container-right .order .order-info .order-item .item-num {
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 6px;
}
.container .container-right .order .order-info .order-item .item-text {
  font-size: 18px;
}
.container .container-right .order .order-info .order-item .item-text i {
  color: #e43c33;
}
.container .container-right .order .order-info .order-item:last-child {
  margin-left: 100px;
}
.container .container-right .order .order-info .order-item:last-child i {
  color: #eacf19;
}
.container .container-right .sell {
  display: flex;
  flex-direction: column;
  height: 248px;
  margin: 20px 0;
}
.container .container-right .sell .common-title {
  display: flex;
}
.container .container-right .sell .common-title .date {
  display: flex;
}
.container .container-right .sell .common-title .date li {
  width: 24px;
  height: 24px;
  line-height: 23px;
  margin-right: 30px;
  color: #0bace6;
  text-align: center;
  border-radius: 3px;
}
.container .container-right .sell .common-title .date .current {
  color: #fff;
  background-color: #4c9bfd;
}
.container .container-right .sell .sell-chart {
  flex: 1;
  margin: 0 35px;
  margin-bottom: 20px;
}
.container .container-right .right-group {
  display: flex;
  height: 232px;
  margin: 20px 0;
}
.container .container-right .right-group .channel {
  flex: 1;
  height: 232px;
  margin-right: 20px;
}
.container .container-right .right-group .channel .channel-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-left: 35px;
}
.container .container-right .right-group .channel .channel-body .channel-item {
  width: 50%;
  font-size: 25px;
  color: #fff;
  margin-bottom: 30px;
}
.container .container-right .right-group .channel .channel-body .channel-item i {
  display: block;
  font-size: 16px;
  color: #4c9bfd;
  margin-top: 10px;
}
.container .container-right .right-group .channel .channel-body .channel-item span {
  font-size: 16px;
  margin-left: 3px;
}
.container .container-right .right-group .progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 232px;
}
.container .container-right .right-group .progress .progress-chart {
  flex: 1;
  margin: 0 35px;
}
.container .container-right .right-group .progress .progress-info {
  display: flex;
  align-items: center;
  padding: 0 35px;
  height: 80px;
}
.container .container-right .right-group .progress .progress-info .progress-item .item-num {
  font-size: 20px;
  color: #fff;
  margin-bottom: 3px;
}
.container .container-right .right-group .progress .progress-info .progress-item .item-text {
  font-size: 16px;
}
.container .container-right .right-group .progress .progress-info .progress-item .item-text i {
  color: #6acca3;
}
.container .container-right .right-group .progress .progress-info .progress-item:last-child i {
  color: #ed3f35;
}
.container .container-right .hot {
  display: flex;
  flex-direction: column;
  height: 283px;
}
.container .container-right .hot .hot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  padding: 0 45px 0 35px;
  font-size: 22px;
  color: #fff;
}
.container .container-right .hot .hot-head .lately {
  font-size: 14px;
  width: 67px;
  height: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #098dc2;
  background: url(../images/line.png) no-repeat;
}
.container .container-right .hot .hot-body {
  flex: 1;
  display: flex;
  padding: 15px 35px 30px;
}
.container .container-right .hot .hot-body .col01 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 25px;
}
.container .container-right .hot .hot-body .col01 .col01-item {
  display: flex;
  align-items: center;
}
.container .container-right .hot .hot-body .col01 .col01-item i {
  font-size: 40px;
  margin-right: 10px;
}
.container .container-right .hot .hot-body .col02 {
  width: 156px;
  display: flex;
  flex-direction: column;
  margin-right: -30px;
}
.container .container-right .hot .hot-body .col02 .col02-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.container .container-right .hot .hot-body .col02 .current {
  background-color: rgba(255, 255, 255, 0.2);
}
.container .container-right .hot .hot-body .icon-up {
  color: #dc3c33;
}
.container .container-right .hot .hot-body .icon-down {
  color: #36be90;
}
.container .container-right .hot .hot-body .col03 {
  width: 156px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  margin-right: -30px;
}
.container .container-right .hot .hot-body .col03 .col03-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
